<template>
    <transition>
        <div style="height: 100%;">
            <nav class="mui-bar mui-bar-tab box-none iphone-x-jc">
                <a class="mui-tab-item" @click="changeTab('/index/wallet', 'wallet')">
                    <template v-if="active==='wallet'">
                        <img src="@/assets/img/coffer/wallet_active.png" class="coffer-icon" alt="">
                        <span class="mui-tab-label" style="color: #0692C2;">{{ $t('m.common.index.prompt[0]') }}</span>
                    </template>
                    <template v-else>
                        <img src="@/assets/img/coffer/wallet.png" class="coffer-icon" alt="">
                        <span class="mui-tab-label">{{ $t('m.common.index.prompt[0]') }}</span>
                    </template>
                </a>
                <a class="mui-tab-item" @click="changeTab('/index/market','market')">
                    <template v-if="active==='market'">
                        <img src="@/assets/img/coffer/market_active.png" class="coffer-icon" alt="">
                        <span class="mui-tab-label" style="color: #0692C2;">{{ $t('m.common.index.prompt[1]') }}</span>
                    </template>
                    <template v-else>
                        <img src="@/assets/img/coffer/market.png" class="coffer-icon" alt="">
                        <span class="mui-tab-label">{{ $t('m.common.index.prompt[1]') }}</span>
                    </template>
                </a>
                <a class="mui-tab-item" @click="changeTab('/index/dapp','dapp')">
                    <template v-if="active==='dapp'">
                        <img src="@/assets/img/coffer/scan_active.png" class="coffer-icon" alt="">
                        <span class="mui-tab-label" style="color: #0692C2;">{{ $t('m.common.index.prompt[3]') }}</span>
                    </template>
                    <template v-else>
                        <img src="@/assets/img/coffer/scan.png" class="coffer-icon" alt="">
                        <span class="mui-tab-label">{{ $t('m.common.index.prompt[3]') }}</span>
                    </template>
                </a>
                <a class="mui-tab-item" @click="changeTab('/index/my','my')">
                    <template v-if="active==='my'">
                        <img src="@/assets/img/coffer/my_active.png" class="coffer-icon" alt="">
                        <span class="mui-tab-label" style="color: #0692C2;">{{ $t('m.common.index.prompt[2]') }}</span>
                    </template>
                    <template v-else>
                        <img src="@/assets/img/coffer/my.png" class="coffer-icon" alt="">
                        <span class="mui-tab-label">{{ $t('m.common.index.prompt[2]') }}</span>
                    </template>
                </a>
            </nav>
            <router-view></router-view>
        </div>
    </transition>
</template>
<script>
    /* eslint-disable */

    export default {
        name: 'index',
        mounted() {
        },
        created() {
            this.setBottomActive();
        },
        data() {
            return {
                active: ""
            }
        },
        methods: {
            changeTab: function (url, path) {
                this.active = path;
                this.changeRoute(url);
            },
            setBottomActive: function () {
                this.active = this.$route.path.match(/\/\w+\/(\w+)/)[1];
            },
        }
    }
</script>
<style scoped>
    @import '../assets/css/coffer.css';
</style>
